<template>
    <div class="lb">
        <el-form :inline="true" :model="form"  >
  <el-form-item label="人员搜索：">
    <el-input placeholder="请选择" v-model="form.userName" clearable>
    </el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">查询</el-button>
  </el-form-item>
  </el-form>
  <div class="butt">
      <el-button  
             @click="add"  
              class="btn"
              icon="el-icon-plus"
              size="small"
              type="primary"
            >新建</el-button>
        </div>
        <div class="bg">
          <el-table 
          :data="list"
          style="width: 100%"
     >
    <el-table-column
      fixed
      type="index"
      label="序号"
      width="100">
    </el-table-column>
    <el-table-column
      label="人员名称"
      prop="userName"
      width="280">
    </el-table-column>
    <el-table-column
       prop="regionName"
      label="归属区域"
      width="280">
    </el-table-column>
    <el-table-column
     prop="role.roleName"
      label="角色"
      width="280">
    </el-table-column>
    <el-table-column
     prop="mobile"
      label="联系电话"
      width="280">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="240">
      <template #default="{row}">
        <el-button type="text" @click="edit(row)">修改</el-button>
        <el-button class="but" type="text" @click="del(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
        <div class="left">
          <span>共{{params.totalCount}}条记录</span>
          <span>第 {{params.pageIndex}}/{{params.totalPage}}页</span>
        </div>
        <div class="right">
          <el-button-group>
      <el-button type="primary" 
      @click=getRoleList(-1) :disabled='params.pageIndex<=1?true:false'>上一页</el-button>
      <el-button type="primary" @click=getRoleList(1)>下一页</el-button>
      </el-button-group>
        </div>
      </div>
     </div>
     <addModels :visible.sync="visible" :list="list" ref="addModels"></addModels>
    </div>
  </template>
  <script>
  import { getRoleList, delRoleList ,editRoleList} from "@/api/role"
  import addModels from "@/views/PersonnelList/components/addModels.vue"
  export default {
    data() {
      return {
        list:[
            // {index:'1',rymc:'运营魏帅鸣',gsqu:'金燕龙办公楼',role:'运营员',tel:'13651077781'}
        ],
        visible:false,
        form:{
           id:'',
           userName:'',
           roleId: '',
           mobile: '',
           regionId: '',
           regionName: '',
           image: '',
           status: false
        },
        params:{
        pageIndex: 0,
        pageSize: 10,
        totalCount: 0,
        totalPage:0,
      },
      }
    },
    created(){
     this.getRoleList()
    },
    methods: {
      async getRoleList(num=0) {
        this.params.pageIndex=+this.params.pageIndex+num
          const res = await getRoleList(this.params)
          console.log(res);
          this.list = res.currentPageRecords
          this.params.pageIndex=res.pageIndex
          this.params.totalPage=res.totalPage
          this.params.totalCount = parseInt(res.totalCount)
        },
       async onSubmit() {
        // console.log(111);
            const res = await getRoleList(this.form)
            this.list = res.currentPageRecords
            // console.log(this.list);
        },
        add() {
            this.visible = true;
        },
        async edit(row) {
          // console.log(row);
         // this.form.id ? await editRoleList (this.form) 
          this.visible = true;
          this.$refs.addModels.form = {...row}

        },
        async del(id) {
           await this.$confirm('确定删除么','提示', {
            type:'warning'
           })
           await delRoleList(id)
           this.$message.success('删除成功')
           this.getRoleList()
        }
      },
      components:{
        addModels
      },
    }
  </script>
  
  <style scoped lang="scss">
  .lb {
    background-color: #f8fafd;
  ::v-deep  .el-form {
    background-color: #fff;
  }
  .butt {
    margin-top: 20px;
    background-color: #fff;
    padding:20px 15px 19px 17px;
   
    .btn {
    background-color: #ff702b;
    border: none;
    width: 90px;
    height: 36px;
  }
  .btn1 {
    // background-color: #fbf4f0;
    border: none;
    width: 90px;
    height: 40px;
  }
  }
  .but {
    color:red;
  }
  .page{
  height: 80px;
  line-height: 80px;
  background-color: #fff;
  display: flex;
  color:#dbdfe5;
  font-size: 20px;
  padding-left: 20px;
  .left{
    span{
      margin-left: 5px;
    }
  }
  .right{
    margin-left:900px;
   ::v-deep .el-button{
      margin-left: 10px;
      background-color: #d5ddf8;
      border: none;
      color:#606266
       }
  }
}
  
  }
  </style>
  